<template>
    <basic-container>
        <avue-crud :option="option" :data="data" ref="crud" v-model="form" :table-loading="loading" :permission="permissionList"
                   :page="page" @refresh-change="refreshChange"
                   @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange"
                   @on-load="onLoad">
            <template slot="search">
                <el-col :span="12">
                    <el-form-item label="发送时间" style="display: inline-block;width: 50%;">
                        <el-date-picker placeholder="开始时间" @change="getTime" value-format="yyyy-MM-dd" v-model="couponBeginTime" type="date" size="small">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="至" label-width="40px" style="display: inline-block;width: 50%;">
                        <el-date-picker placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd" v-model="couponEndTime" type="date" size="small">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </template>
            <template slot-scope="{row,type,size}" slot="menu">
                <el-button :type="type" :size="size" icon="el-icon-thumb" @click="rowMenus(row)" v-has="'/mall-cloud-system/role/edit'">重新发送</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
    import {
        verifyCodeList
    } from "@/api/admin/message";

    import {
        mapGetters
    } from "vuex";
    var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
    export default {
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() + 3600 * 1000 * 24 * 1 < Date.now();
                    },
                },
                couponEndTime: "",
                couponBeginTime: "",
                form: {},
                tempData:{},
                query: {},
                query4: {},
                currentMenuId: "",
                loading: true,
                isDisabled:false,
                loadReplyBtn:false,
                menuTree: [],
                menuKeys: [],
                resourceTableData: [],
                resourceKeys: [],
                box: false,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                tablePage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                },
                option: {
                    menu:false,
                    size: 'mini',
                    cancelBtn:false,
                    delBtn:false,
                    editBtn:false,
                    viewBtn:false,
                    excelBtn: false,
                    tip: false,
                    border: true,
                    index: true,
                    selection: false,
                    addBtn:false,
                    searchBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    height: 'auto',
                    // calcHeight: 380,
                    dialogType: 'dialog',
                    rowKey: 'roleId',
                    menuWidth: 300,
                    align: 'center',
                    searchMenuSpan:6,
                    column: [{
                        label: "发送时间",
                        prop: "addTime",
                    },
                        {
                            label: "接收类型",
                            prop: "receiverType",
                           rules: [{
                                required: true,
                                message: "请输入别名",
                                trigger: "blur"
                            },
                                {max: 10, message: '输入长度不得多于10个长度', trigger: 'blur'},
                            ]
                        },
                        {
                            label: "接收号码",
                            prop: "receiver",
                        },{
                            label:'发送状态',
                            prop:'sendStatus',
                            // valueDefault: false,
                            // type: "radio",
                            search: true,
                            type:'select',
                            display: true,
                            dicData: [
                                {
                                    label: "已发送",
                                    value: 1
                                },
                                {
                                    label: "未发送",
                                    value: 0
                                }
                            ],
                        },{
                            label:'消息类型',
                            prop:'useType',
                            search: true,
                            type:"select",
                            fixed: true,
                            dicData: Dict.MSG_USE_ENUM,
                        },
                    ]
                },
                data: [],
            }
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList() {
                return {
                    addBtn: this.vaildData(this.permission["/mall-cloud-system/role/add"], false),
                    delBtn: this.vaildData(this.permission["/mall-cloud-system/role/remove"], false),
                    editBtn: this.vaildData(this.permission["/mall-cloud-system/role/edit"], false)
                };
            },
        },
        methods: {
            //搜索时间范围限制
            getTime() {
                console.log('开始时间:',this.couponBeginTime,'结束时间:',this.couponEndTime)
                let nowDate=new Date().toLocaleDateString().replace(/\//g, "-")
                // if(new Date(this.couponBeginTime) < new Date(nowDate)) {
                //     this.couponBeginTime =''
                //     return (this.$message({
                //         type: "error",
                //         message: "开始时间不能小于当前时间"
                //     }))
                // }
                // if(new Date(this.couponEndTime) < new Date(nowDate)) {
                //     this.couponEndTime=''
                //     return (this.$message({
                //         type: "error",
                //         message: "结束时间不能小于当前时间"
                //     }))
                // }
                if (this.couponBeginTime > this.couponEndTime && this.couponBeginTime && this.couponEndTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.couponEndTime = ''
                }
            },
            searchReset() {
                this.query = {};
                this.couponEndTime = ''
                this.couponBeginTime = ''
                this.onLoad(this.page);
            },
            searchChange(params,done) {
                console.log('params',params)
                console.log('开始时间:',this.couponBeginTime,this.couponEndTime)
                params.beginTime = this.couponBeginTime
                params.endTime = this.couponEndTime
                this.page.currentPage = 1;
                this.query = params;
                this.onLoad(this.page, params,done);
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page);
            },

            onLoad(page, params = {},done) { //页面初始化请求管理员列表
                this.loading = true;
                verifyCodeList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if(done){
                        done();
                    }
                    this.res = false;
                    const data = res.data;
                    this.page.total = data.count;
                    this.data = data.data
                    this.loading = false;
                });
                // getMenuTree().then(res => { //请求树结构
                //     this.menuTree = res.data.data;
                // });
            },

        }
    };
</script>

<style scoped>

</style>
